To use the grid system, add the class to an element, component, or page layout. Each grid is independent of other nested grids. You can limit attributes of each grid to specific regions in the app. A grid style is not an all or nothing solution.
Adding the class causes the flow of your elements to wrap when they exceed 100% of their parent’s width.
You can easily change the flow direction of your grid by adding a modifier class to the element. To stack your columns vertically instead of their default row behavior, use . You can also reverse the left to right behavior by adding or top to bottom by adding .
If you want your application to fill 100% of the width and height of the viewport and nest other grids inside, use the top-level app helper class . An assortment of classes are available to contain your grids.
Grid Items (Regions/Colums)
When you add the class to the grid items, no padding or gutters are added. They are simply divisions of their parent. If you want gutters, add one of the spacing utility classes such as , , , , or . These will add different sized gutters to the left and right side of your column.
By default, the width of each column within a grid row is determined by the content within. Though this automatic sizing allows you to achieve most desired outcomes, you can add manual sizing classes to the columns if you need specific column widths.
Using the manual sizing class helpers, you can specify a column span across the following grids –2, 3, 4, 5, 6, 7, 8 and 12. The grid supports up to 12 columns.
Visual Glossary of Terminology